<!--
 * new page
 * @author: YK
 * @since: 2023-11-30
 * index.vue
-->
<template>
  <div class="trend">
    <slot v-if="slots.default"></slot>
    <div v-else class="text" :style="{ color: textColor }">
      {{ text }}
    </div>

    <div class="icon">
      <!-- <el-icon-arrow-up
        :style="{ color: !reverseColor ? upIconColor : downIconColor }"
        v-if="type === 'up'"
      />
      <el-icon-arrow-down
        :style="{ color: !reverseColor ? downIconColor : upIconColor }"
        v-else
      /> -->
      <component
        v-if="type === 'up'"
        :style="{ color: !reverseColor ? upIconColor : downIconColor }"
        :is="`el-icon${toLine(upIcon)}`"
      ></component>
      <component
        v-else
        :style="{ color: !reverseColor ? downIconColor : upIconColor }"
        :is="`el-icon${toLine(downIcon)}`"
      ></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSlots, computed } from "vue";
import { toLine } from "../../../utils";
const props = withDefaults(
  defineProps<{
    type: string;
    text: string;
    upIconColor: string;
    downIconColor: string;
    reverseColor: boolean; //颜色反转 ，只支持默认颜色，自定义颜色不支持反转
    upTextColor: string;
    downTextColor: string;
    upIcon: string;
    downIcon: string;
  }>(),
  {
    type: "up",
    text: "文字",
    upIconColor: "#f5222d",
    downIconColor: "#52c41a",
    reverseColor: false,
    upTextColor: "#000",
    downTextColor: "#000",
    upIcon:'ArrowUp',
    downIcon:'ArrowDown'
  }
);
const slots = useSlots();
//文字颜色
const textColor = computed(() => {
  return props.type === "up" ? props.upTextColor : props.downTextColor;
});
</script>

<style scoped lang="scss">
.trend {
  display: flex;
  align-items: center;
  .text {
    font-size: 12px;
    margin-right: 4px;
  }
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
}
</style>
